.box.monitor-box {
  position: relative;
  background-image: url("../images/planet-bg.png");
  background-size: 100% 100%;
  background-position: center center;
  &:before {
    content: '';
    position: absolute;
    bottom: 0;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 100vh;
    width: 100vw;
    background : url("../images/planet.png") transparent;
    background-size: auto 88vh ;
    background-repeat: no-repeat;
    background-position: center bottom;
  }
}
.nav-list {
  background-size: 100%;
   .link-box{
     position: relative;
     width: 100%;
     li{
       position: fixed;
        a{
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: 168px;
          height: 168px;
          background-image: url("../images/link-bg.png");
          background-size: 100%;
          font-size: 1.2vw;
          line-height: 2;
          color: #fff;
          transform: translate(-50%,-50%);
        }
       &.link1 {
         top: 19vh;
         left: 56vw;
       }
       &.link2 {
         top: 26vh;
         left: 66vw;
       }
       &.link3 {
         top: 43vh;
         left: 75vw;
       }
       &.link4 {
         top: 65vh;
         left: 75vw;
       }
       &.link5 {
         top: 81vh;
         left: 66vw;
       }
       &.link6 {
         top: 86vh;
         left: 56vw;
       }
       &.link7 {
         top: 86vh;
         left: 44vw;
       }
       &.link8 {
         top: 65vh;
         left: 25vw;
       }
       &.link9 {
         top: 80vh;
         left: 34vw;
       }
       &.link10 {
         top: 42vh;
         left: 25vw;
       }
       &.link11 {
         top: 25vh;
         left: 34vw;
       }
       &.link12 {
         top: 18vh;
         left: 45vw;
       }
       &.link13 {
         top: 81vh;
         left: 66vw;
       }
     }
   }
}
